Vue进阶（幺玖零）：表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别 |
您所在的位置：网站首页 › element ui作用 › Vue进阶（幺玖零）：表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别 |
Vue进阶（幺玖零）：表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别
|
文章目录
一、前言二、表单验证时，trigger:'blur' OR trigger:'change' OR 不设置？2.1 下拉框验证2.2 日期选择器验证2.3 复选框验证2.4 单选框验证
三、拓展阅读
一、前言
利用elementUI实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形。
对el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证。 下拉框（el-select）、日期选择器（el-date-picker）、复选框（el-checkbox）、单选框（el-radio）验证时，trigger的值选择change，即当值发生变化时就进行验证。 2.1 下拉框验证 rules: { region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ] } 2.2 日期选择器验证 date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], 2.3 复选框验证 type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], 2.4 单选框验证 resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], 三、拓展阅读《Vue进阶（幺伍柒）：表单重置this.$refs[name].resetFields()；失效》 《Vue进阶（幺贰幺）：表单校验注意事项》 《Vue进阶（幺叁柒）：表单校验》 《Vue进阶（三十）：vue中使用element-ui进行表单验证》 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》 |
通过去除校验规则中相应元素的trigger:'blur'属性，可解决以上问题。 
至于表单校验时，校验元素trigger属性值的选择，需要继续深究。若不设置trigger属性，该属性是否有默认值？【本文地址】
今日新闻 |
推荐新闻 |